<template>
  <section>
    <el-select v-model="test" filterable placeholder="请输入关键词" value-key="id" size="mini">
      <el-option v-for="item in list" :key="item.id" :label="item.title?item.title:item.name" :value="item"> </el-option>
    </el-select>
    <el-table :data="ad.config.detail">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" >
        <template slot-scope="scope">
          <span v-if="scope.row.title">
          {{scope.row.title?scope.row.title:''}}</span>
          <span v-else>
          {{setName(scope.row)}}
          {{scope.row.title?scope.row.title:''}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="广告图">
        <template slot-scope="scope">
          <upload-img v-on:get="getImgUrl($event,scope.row)"></upload-img>
          <el-input size="mini" v-model="scope.row.adImg" style="width: 50%"></el-input>
          <el-popover placement="top" trigger="hover" v-if="scope.row.adImg">
            <img :src="scope.row.adImg" width="60%"/>
            <el-row slot="reference"><img :src="scope.row.adImg" width="20%"/></el-row>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="this.ad.adType.code === 'goods' || this.ad.adType.code === 'activity'">
        <template slot-scope="scope">
          <i class="el-icon-close"  @click="removeBtn(scope.row)" style="color:red"></i>
          <i class="el-icon-arrow-up"  @click="upBtn(scope.row)" v-if="scope.$index >0" style="color:blue"></i>
          <i class="el-icon-arrow-down"  @click="downBtn(scope.row)"  v-if="scope.$index < ad.config.detail.length-1" style="color:blue"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px">
      <el-button style="margin-top: 10px;float: right" size="mini" type="success" @click="saveSetBtn">保存</el-button>
    </el-row>
  </section>
</template>

<script>
  import uploadImg from  '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "setAd",
    components:{uploadImg},
    props:['ad'],
    data(){
      return {
        searchKey:null,
        list:null,
        test:null,
        pageKeys:{},
        goodsTypes:null,
        departmentList:[],
        adImg:null
      }
    },
    watch:{
      test(nv,ov){
        console.log(nv)
        if(this.ad.adType.code === 'activity'){
          this.ad.config.detail.push({id:nv.activityId,title:nv.title?nv.title:nv.name})
          return
        }
        this.ad.config.detail.push({id:nv.id,title:nv.title?nv.title:nv.name})
      }
    },
    created(){
      console.log(this.ad)
      if(this.ad.config.baseSet === undefined){
        Vue.set(this.ad.config,'baseSet',[])
      }
      if(this.ad.config.detail === undefined){
        Vue.set(this.ad.config,'detail',[])
      }
      this.getList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getImgUrl(data, row) {
        console.log('获取图片————————————————', data)
        if(row.adImg === undefined){
          Vue.set(row,'adImg',data[0].url)
          return
        }
        row.adImg = data[0].url
      },
      saveSetBtn(){
        console.log(this.ad.config)
        this.$emit('confirm',{id:this.ad.id,config:JSON.stringify(this.ad.config)})
      },
      savePageKeysBtn(){
        console.log(this.ad)
        console.log(this.pageKeys)
        console.log(this.adImg)
        this.ad.config.detail.push(this.pageKeys)
        // this.$emit('confirm',{id:this.ad.id,config:JSON.stringify(this.ad.config)})
      },
      setName(row){
        console.log(row)
        if(this.ad.adType.code === 'goods'){
          this.getGoods(row)
        }else if(this.ad.adType.code === 'activity'){
          this.getActivity(row)
        }
      },
      getGoods(row){
        console.log(row)
        this.fetch({name:"getMallGoods",data:{id:row.id}})
          .then(res=>{
            console.log(res)
            Vue.set(row,'title',res.title)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getActivity(row){
        this.fetch({name:"getActivity",data:{id:row.activityId?row.activityId:row.id}})
          .then(res=>{
            console.log(res)
            Vue.set(row,'title',res.title)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getList(){
        if(this.ad.adType.code === 'goods'){
          this.getGoodsList()
        }else if(this.ad.adType.code === 'activity'){
          this.getActivities()
        }else if(this.ad.adType.code === 'store'){
          this.getStores()
        }
      },
      getStores(){
        this.fetch({name:"getStoreList"})
          .then(res=>{
            console.log(res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGoodsList(pageNo){
        this.fetch({name:"getMallGoodsList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log(res)
            this.list=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getActivities(){
        this.fetch({name:"getActivityShareList",data:{memberId:2}})
          .then(res=>{
            console.log(res)
            this.list=res.content
            this.list.forEach(r=>{
              this.setName(r)
            })
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      removeBtn(row){
        let index = this.ad.config.detail.findIndex(f=>f.id === row.id)
        if(index <0) return
        this.ad.config.detail.splice(index,1)
      },
      upBtn(row){
        let index = this.ad.config.detail.findIndex(f=>f.id === row.id)

        if(index <0) return
        this.ad.config.detail.splice(index,1)
        this.ad.config.detail.splice(index-1,0,row)
      },
      downBtn(row){
        let index = this.ad.config.detail.findIndex(f=>f.id === row.id)

        if(index <0) return
        this.ad.config.detail.splice(index,1)
        this.ad.config.detail.splice(index+1,0,row)
      }
    }
  }
</script>

<style scoped>

</style>
